<template>
	<view class="nav">
		<view :style="'height:'+status+'rpx;'+contentSytle"></view>
		<view class="headNav" v-if="isHome"
			:style="'height:'+navHeight+'rpx;'+'line-height:'+navHeight+'rpx;padding-left:20rpx'">
			<image class="img" src="../../static/images/card_1.png" mode=""></image>
			<text class="city">中部地区</text>
			<view class="search"
				:style="'height:'+MenuButtom.height*2+'rpx;line-height:'+MenuButtom.height*2+'rpx;margin-right:'+(MenuButtom.width*2+30)+'rpx;'">
				<navigator style="width: 100%;" url="../../pages/search/search">
					<text>找医院</text>
				</navigator>
			</view>
		</view>
		<view v-else class="navbar" :style="'height:'+navHeight+'rpx;'+contentSytle">
			<view class="back-icon" @click="backOrHome">
				<image src="../../static/navbar/ic_back.png" v-if="pages>1" mode=""></image>
				<image src="../../static/navbar/ic_home.png" v-else mode=""></image>
			</view>
			<view class="container" :style="'height:'+navHeight+'rpx;'+'line-height:'+navHeight+'rpx;'+fontSytle"
				v-if="textTitle">
				{{textTitle}}
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits,
		onBeforeMount,
		ref
	} from 'vue';
	// 页面栈数量
	const pages = ref(getCurrentPages().length)
	const searchHospital = ref('')
	const props = defineProps({
		title: {
			type: String,
			default: () => {
				return '父亲的值'
			}
		},
		backgorund: {
			type: String,
			default: 'rgba(255,255,255,1)'
		},
		color: {
			type: String,
			default: 'rgba(0,0,0,1)'
		},
		fontSize: {
			type: String,
			default: '32'
		},
		iconWidth: {
			type: String,
			default: '116'
		},
		iconHeight: {
			type: String,
			default: () => '38'
		},
		textTitle: {
			type: String,
			default: ''
		},
		isHome: {
			type: Boolean,
			default: ""
		}

	})
	// 首页跳转
	const backOrHome = () => {
		if (pages.value > 1) {
			uni.navigateBack()
		} else {
			uni.switchTab({
				url: 'pages/index/index'
			})
		}
	}
	//背景
	const contentSytle = ref('')
	// 字体
	const fontSytle = ref('')
	// 图标
	const iconSytle = ref('')
	// 样式设置
	const setStyle = () => {
		contentSytle.value = ['background:' + props.backgorund].join(';')
		fontSytle.value = ['color:' + props.color, 'font-size:' + props.fontSize + 'rpx'].join(';')
		iconSytle.value = ['height:' + props.iconHeight + 'rpx', 'weight:' + props.iconWidth + 'rpx'].join(
			';')
		console.log(contentSytle.value, '111111111111111')
	}
	const emit = defineEmits(['changeTitle'])
	// 状态栏高度
	const status = ref(0)
	// 内容高度、
	const navHeight = ref(0)
	onBeforeMount(() => {
		setNavSize()
		setStyle()
	})
	// 计算状态栏高度
	const setNavSize = () => {
		const {
			statusBarHeight,
			system,
			safeArea
		} = uni.getSystemInfoSync()
		// 系统给的具体值是以px为单位，所以找375的机型让值乘2即可
		status.value = statusBarHeight * 2
		// 判断系统
		const isIOS = system.indexOf('iOS') > -1
		// !system.startsWith('iOS')
		if (!isIOS) {
			navHeight.value = 96
		} else {
			// 因为ios顶部有刘海
			navHeight.value = 88
		}
		// navHeight.value = safeArea.top * 2
		console.log('=========================')
	}
	// 获取胶囊宽高
	const MenuButtom = uni.getMenuButtonBoundingClientRect()
</script>

<style lang="scss">
	.nav {
		position: fixed;
		width: 100%;
		top: 0;
		left: 0;
		z-index: 2;
		background-color: #fff;

		.headNav {
			display: flex;
			justify-content: start;
			align-items: center;

			.img {
				margin-right: 10rpx;
				vertical-align: middle;
				width: 60rpx;
				height: 60rpx;
			}

			.city {}

			.search {
				flex: 1;
				display: flex;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 0rpx 20rpx;
				font-size: 30rpx;
				color: #999;
				width: 40%;
				height: 65%;
				margin-left: 30rpx;
				background-color: rgba(9, 9, 9, .1);
				border-radius: 50rpx;
			}
		}

		.navbar {
			// display: flex;
			// justify-content: start;
			// align-items: center;
			position: relative;

			.back-icon {
				display: flex;
				align-items: center;
				widows: 64rpx;
				height: 100%;
				margin-left: 10rpx;

				image {
					width: 64rpx;
					height: 64rpx;
				}
			}

			.container {
				position: absolute;
				top: 0;
				left: 50%;
				transform: translate(-50%)
			}
		}
	}
</style>